<script setup lang="ts">
import { onMounted, ref } from 'vue'

onMounted(() => {
})
</script>

<template>
  <div class="h-full w-full relative">
    <t-swiper class="!h-full" animation="fade">
      <t-swiper-item v-for="item in 6" :key="item">
        <div class="demo-item">{{ item }}</div>
      </t-swiper-item>
    </t-swiper>
<!--    <div class="swiper-container h-full">-->
<!--      <div class="swiper-wrapper">-->
<!--        <div-->
<!--          v-for="(slide, index) in slides"-->
<!--          :key="index"-->
<!--          class="swiper-slide relative"-->
<!--        >-->
<!--          <div-->
<!--            v-if="slide.type === 'image'"-->
<!--            class="h-full w-full bg-cover bg-center"-->
<!--            :style="{ backgroundImage: `url(${slide.src})` }"-->
<!--          />-->
<!--          <video-->
<!--            v-else-->
<!--            class="h-full w-full object-cover"-->
<!--            :src="slide.src"-->
<!--            autoplay-->
<!--            muted-->
<!--            loop-->
<!--          />-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; Navigation &ndash;&gt;-->
<!--      <div class="swiper-pagination" />-->
<!--      <div class="swiper-button-next text-white" />-->
<!--      <div class="swiper-button-prev text-white" />-->
<!--    </div>-->
  </div>
</template>
